<%@ taglib prefix="maxlength" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: Easy
  Date: 2017-09-27
  Time: 15:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<div class="row">
    <div class="col-md-12">

        <form  class="form-horizontal" id="addForm" >
            <div class="panel panel-default">
                <div class="panel-body">

                    <div class="row">
                        <div class="col-md-6">

                            <div class="form-group">
                                <label class="col-md-3 control-label">上级菜单</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <upms:treeselect id="menu"
                                                         name="pId"
                                                         value="${menu.parent.id}"
                                                         labelName="parent.menuName"
                                                         labelValue="${menu.parent.menuName}"
                                                         title="菜单"
                                                         url="/menu/treeData"
                                                         extId="${menu.id}" cssClass="required"/>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">菜单名称</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <input type="text" class="form-control" name="menuName" placeholder="请输入菜单名称">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">菜单图标</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-circle"></span></span>
                                        <input type="text" class="form-control" name="icon" placeholder="请输入菜单图标">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">权限标识</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-warning"></span></span>
                                        <input type="text" class="form-control" name="permissionId" placeholder="请输入权限标识">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">菜单路径</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-retweet"></span></span>
                                        <input type="text" class="form-control"  name="url"  value="" placeholder="请输入菜单路径">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">菜单排序</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control" name="sort" placeholder="你输入菜单排序">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">菜单类型</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-cogs"></span></span>
                                        <select class="form-control" name="menuType">
                                            <option value="">请选择</option>
                                            <option value="0">功能菜单</option>
                                            <option value="1">操作菜单</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">菜单简介</label>
                                <div class="col-md-9 col-xs-12">
                                    <textarea class="form-control" rows="5" name="menuContext" placeholder="请输入菜单简介"></textarea>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <div class="panel-footer">
                    <input type="button" class="btn btn-default" value="清除"/>
                    <input type="button" class="btn btn-primary pull-right" onclick="save()" value="保存">
                </div>
            </div>

        </form>

    </div>
</div>


<script>

    /* 编写表单验证函数*/
    function validform(){
        return $("#addForm").validate({
            ignore: [],
            rules: {
                menuId:{
                    required: true
                },
                menuName: {
                    required: true,
                    minlength: 2,
                    maxlength: 8
                },
                icon:{
                    required:true
                },
                sort:{
                    required:true,
                    digits:true
                },
                permissionId:{
                    required:true
                },
                menuType:{
                    required:true
                }
            },
            errorPlacement: function (error, element){
                error.insertAfter(element.parent());
            },
            messages: {
                menuId:{
                    required:"请输入上级菜单"
                },
                menuName: {
                    required: "请输入菜单名称",
                    minlength: "菜单名称至少有两个字符组成",
                    maxlength: "菜单名称最多有八个字符组成"
                },
                icon:{
                    required:"请输入菜单图标"
                },
                sort:{
                    required:"请输入菜单的排序",
                    digits:"菜单排序只能是整数"
                },
                permissionId:{
                    required:"请输入权限标识"
                },
                menuType:{
                    required:"请选择菜单类型"
                }
            },
        });
    }
    function save() {
        var param = getParams("addForm");
        if(validform().form()) {
            $.ajax({
                type: 'post',
                dataType: 'json',
                data: param,
                async: true,
                url: '/menu/save',
                success: function (data) {
                    if (data.success){
                        layer.msg(data.msg,{icon:1,time:1000},function () {
                            layer.close(top.layer_menu);
                            reloadPage();
                        });
                    }else{
                        layer.msg(data.msg,{icon: 2,time:1000});
                    }
                },
                error: function () {
                    alert("保存失败");
                }
            })
        }
    }
</script>
